<template>
    <div>
        <div class="clipper-container position" id="clipper-container" ref="clipper" v-show="showStatus">
            <!-- 裁剪部分 -->
             <img id="cropimg" src="" alt="">
                <div id="preview"></div>
            <!-- 底部操作栏 -->
            <div class="action-bar position">
                <button class="btn-cancel" @click="_cancel">取消</button>
                <button class="btn-ok" @click="_clipper">确认</button>
            </div>

            <!-- 背景遮罩 -->
            <div class="mask position" :class="{opacity: maskShow}"></div>
        </div>
    </div>
</template>

<script>
import Cropper from "cropperjs";
export default {
  data() {
    return {
      maskShow: false,
      showStatus: false
    };
  },
  props:{
      imgUrl:{
          type:String,
          default:function(){
              return ""
          }
      },
  },
  methods: {
      //取消裁剪
    _cancel() {
        this.cropper1.destroy();
         this.showStatus = false;
    },
    //确认裁剪
    _clipper() {
        if (!this.cropper1.getCroppedCanvas()) {
          return false;
        }
        let file = this.cropper1.getCroppedCanvas().toDataURL();
        //向父组件传值
        this.$emit('cutSuccess',file);
        this.showStatus = false;
      },
  },
  created() {},
  mounted(){},
  watch: {
      //监听当显示状态为真时，  初始化 Cropper
    showStatus(newVal, oldVal) {
      if (newVal) {
        let img1 = document.getElementById('cropimg');
        let obj = {
            dragMode: 'move',
            // preview: '#preview',
            restore: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            cropBoxResizable: false,  //可拖拽裁剪框
            toggleDragModeOnDblclick: false,
            aspectRatio :500/500,
        };
        this.cropper1 = new Cropper(img1, obj);
        this.cropper1.replace(this.imgUrl);
        let cssStr = "overflow-y: hidden; height: 100%;";
        document.getElementsByTagName("html")[0].style.cssText = cssStr;
        document.body.style.cssText = cssStr;
        document.getElementById("app").style.cssText = cssStr;
      } else {
        this.cropper1.destroy();  //裁剪完销毁
        let cssStr = "overflow-y: auto; height: auto;";
        document.getElementsByTagName("html")[0].style.cssText = cssStr;
        document.body.style.cssText = cssStr;
      }

      // 下面需要这两行代码，兼容不同浏览器
      document.body.scrollTop = this.pageScrollYoffset;
      window.scroll(0, this.pageScrollYoffset);
    }
  }
};
</script>

<style>
  @import url("../../../static/css/cropper.min.css");
#cropimg {
  width: 100%;
  height: 200px;
  height: 100%;
  background: #fff;
  margin-top: 50%;
}
.cropper-bg{
    z-index: 200;
}
.position {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
      overflow: hidden;
}
.clipper-part {
  bottom: 61px;
  z-index: 102;
}
.pCanvas-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
}
.clipper-container {
  line-height: 0;
  background-color: #656161;
}
.action-bar {
  box-sizing: content-box;
  top: auto;
  z-index: 103;
  height: 60px;
  z-index: 201;
  line-height: 60px;
  border-top: 1px solid rgba(256, 256, 256, 0.3);
}
.position button {
  display: block;
  padding: 0 15px;
  line-height: 60px;
  font-size: 16px;
  color: #fff;
  background: none;
  border: none;
  outline: 0;
}
.position button.btn-cancel {
  float: left;
}
.position button.btn-ok {
  float: right;
}
.mask {
  z-index: 10;
  transition: opacity 500ms;
  background-color: #000;
  opacity: 0;
}
.mask .opacity {
  opacity: 0.8;
}
.gesture-mask {
  bottom: 61px;
  z-index: 103;
}
</style>
